<template>
	<view :style="viewColor">
		<view class="content">
			<scroll-view id="circle_list" scroll-y lower-threshold="50" @scrolltolower="pageCircleList" scroll-with-animation :style="{height: scrollHeight + 'px'}">
				<view v-if="circle_list.length" class='circle'>
					<view v-for="(item, index) in circle_list" :key="index" class='circle_item'>
						<view class='circle_avatar'><image :src="item.avatar" /></view>
						<view class='circle_into'>
							<view class='circle_title font-size32-bold line1'>{{item.title}}</view>
							<view class='circle_fensi line1'><image class="circles_item_gz_icon" :src="domain + '/uploads/default/20230628/2c7d68b982302e32ccfa8c0a3d922319.png'" />{{item.user_circle_count}}粉丝</view>
							<view class='circle_checked' color="#FEAD00">
								<image src="https://img.jukee.net/def/d69c3202310051804241617.png" @click="checkCircle(item.id, 0)" v-if="check_ids.includes(item.id)" />
								<image src="https://img.jukee.net/def/a6d9c20231005180425628.png" @click="checkCircle(item.id, 1)" v-else />
							</view>
						</view>
					</view>
				</view>
				<emptyPage v-else  title="暂无推广人脉圈"/>
			</scroll-view>
			<view class="bottom">
				<view class="bottom_tips font-size32-bold">你已选择<text>{{check_ids.length}}</text>个圈子</view>
				<view class="prodmotion_circle_select">
					<view class="prodmotion_circle_price">
						<view class="prodmotion_circle_price_list">
							<view class="prodmotion_circle_price_item" v-for="(item, index) in group_data" :key="index" :class="pay_checked == index ? 'on' : ''" @click="pay_checked = index">
								<view class="prodmotion_circle_price_tit font-size32-bold">1个圈/<text>{{item.number}}天</text></view>
								<view class="prodmotion_circle_price_pri font-size32-bold">{{item.price}}元</view>
							</view>
						</view>
					</view>
					<view class="prodmotion_circle_button font-size36-bold" @click="payOrder">置顶推广</view>
				</view>
			</view>
		</view>
		<payment :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :totalPrice='total_price' isCall></payment>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
	</view>
</template>

<script>
	 
	let app = getApp();
	import {
		getUserListCircle
	} from '@/api/circle.js';
	import {
		getUserInfo,
		rechargeWechat,
	} from '@/api/user.js';
	import {
		mapGetters
	} from "vuex";
	import authorize from '@/components/Authorize';
	import emptyPage from '@/components/emptyPage.vue'
	import payment from '@/components/payment';
	import { getSystemGroupData } from "@/api/api";
	import { configMap } from '@/utils';
	import { HTTP_REQUEST_URL } from '@/config/app';
	export default {
		components: {
			authorize,
			emptyPage,
			payment
		},
		data() {
			return {
				domain: HTTP_REQUEST_URL,
				loading: false,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false ,//是否隐藏授权
				payMode: [{
					name: '微信支付',
					icon: 'icon-weixinzhifu',
					value: 'wechat',
					title: '微信快捷支付',
					payStatus: true
					}
					// #ifdef H5 ||APP-PLUS
					,
					{
					name: '支付宝支付',
					icon: 'icon-zhifubao',
					value: 'alipay',
					title: '支付宝支付',
					payStatus: true
					}
					// #endif
					,
					{
						name: "余额支付",
						icon: "icon-yuezhifu",
						value: 'balance',
						title: '可用余额:',
						number: 0,
						payStatus: this.$store.getters.globalData.yue_pay_status
					}
				],
				userInfo: {},
				scrollHeight: 0,
				circle_list: [],
				circle_list_where: {
					page: 1,
					limit: 10,
					community_id: '',
					type: 4,
				},
				check_ids: [],
				group_data: [],
				pay_checked: 0,
				total_price: 0,
				pay_close: false,
			};
		},
		computed: configMap(['hide_mer_status'], mapGetters(['isLogin','viewColor','keyColor'])),
		onLoad(options) {
			let that = this;
			if(!options.community_id) return that.$util.Tips({title: '推广服务不存在'}, {
				tab: 3
			})
			that.circle_list_where.community_id = options.community_id;
			if (this.isLogin) {
				this.getUserInfo();
			} else {
                this.isAuto = true;
                this.isShowAuth = true
			}
			that.getListCircle();
			that.getSystemGroupData();
		},
		mounted: function() {
			let that = this;
			setTimeout(function() {
				uni.createSelectorQuery()
				.select('.content')
				.boundingClientRect((rect1) => {
				  uni.createSelectorQuery()
					.select('.bottom')
					.boundingClientRect((rect2) => {
					  that.scrollHeight = parseFloat(rect1.height - rect2.height).toFixed(2);
					  console.log('剩余高度:', that.scrollHeight);
					})
					.exec();
				})
				.exec();
			}, 500)
		},
		methods: {
			// 弹出支付
			payOrder() {
				let that = this;
				if(!that.check_ids.length) return that.$util.Tips({title: '请选择推广人脉圈'})
				if(!that.group_data[that.pay_checked]) return that.$util.Tips({title: '请选择推广服务'})
				let total_price = parseFloat(that.check_ids.length * that.group_data[that.pay_checked].price).toFixed(2);
				that.total_price = total_price;
				that.pay_close = true;
			},
			// 选择人脉圈
			checkCircle(circle_id, type) {
				let that = this;
				if(type == 1) {
					that.check_ids.push(circle_id)
				} else {
					let index = that.check_ids.indexOf(circle_id);
					that.check_ids.splice(index, 1)
				}
			},
			getListCircle() {
				let that = this;
				if(that.loading) return false;
				let data = that.circle_list_where;
				getUserListCircle(data).then(res=>{
					that.circle_list = that.circle_list.concat(res.data.list)
					that.loading = res.data.list.length >= that.circle_list_where.limit ? false : true
					that.circle_list_where.page++;
				})
			},
			pageCircleList() {
				this.getListCircle();
			},
			getSystemGroupData() {
				let that = this;
				getSystemGroupData({name: 'service_circle_promotion'}).then(res=>{
					that.group_data = res.data.list
				})
			},
			/**
			 * 授权回调
			 */
			onLoadFun: function() {
				this.isShowAuth = false;
				return uni.switchTab({
					url: '/pages/user/index'
				});
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			/**
			 * 获取用户信息
			 *
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data;
					// #ifdef MP
					that.payMode[1].number = res.data.now_money;
					// #endif
					// #ifdef H5 ||APP-PLUS
					that.payMode[2].number = res.data.now_money;
					// #endif
				});
			},
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				action && this[action] && this[action](value);
			},
			payClose: function() {
				this.pay_close = false;
			},
			payCheck: function(paytype) {
				let that = this;
				let order = that.group_data[that.pay_checked]
				let type = ''
				if (paytype == 'wechat') {
					// #ifdef H5
					type = this.$wechat.isWeixin() ? 'weixin' : 'h5';
					// #endif
					// #ifdef APP-PLUS
					type = 'weixin';
					// #endif
					// #ifdef MP
					type = 'routine';
					// #endif
				} else if (paytype == 'balance') {
					type = 'balance';
				}else if(paytype == 'alipay'){
					// #ifndef MP
					type = 'alipay';
					// #endif					
					// #ifdef MP
					type = 'alipayQr';
					// #endif
				}
				if (!order || !order.group_data_id) return that.$util.Tips({
					title: '请选择要支付的订单'
				});
				if (paytype == 'balance' && parseFloat(that.userInfo.now_money) < parseFloat(that.total_price)) return that.$util.Tips({
					title: '余额不足！'
				});
				let extend_data = {
					service_circle_top_ids: that.check_ids,
					community_id: that.circle_list_where.community_id
				}
				uni.showLoading({
					title: '支付中'
				});
				rechargeWechat({
					type: type,
					recharge_id: order.group_data_id,
					recharge_type: 6, // 1充值查看会员联系方式次数
					extend:extend_data,
					// #ifdef H5
					return_url: 'http://'+window.location.host+'/pages/users/index',
					// #endif
				}).then(res => {
					let status = res.data.type,
						jsConfig = res.data.config,
						goPages = '/pages/users/user_community/index?type=1';
					switch (status) {			
						case 'ORDER_EXIST':
						case 'EXTEND_ORDER':
						case 'PAY_ERROR':
						case 'error':
							uni.hideLoading();
							that.payClose();
							return that.$util.Tips({
								title: res.message
							});							
							break;
						case 'success':
							uni.hideLoading();
							that.payClose();					
							return that.$util.Tips({
								title: '支付成功',
								icon: 'success'
							}, ()=>{
								that.payOrderSuccess();
							});
							break;
						case 'alipay':
						case 'alipayQr':
							uni.hideLoading();
							that.payClose();
							uni.navigateTo({
								url: goPages,
							})	
							return 								
							break;	
						// #ifndef MP
						case "wechat":
						case "weixin":
						case "weixinApp":
							jsConfig.timeStamp = jsConfig.timestamp;
							// #ifndef APP-PLUS
							that.$wechat.pay(jsConfig).then(res => {	
								that.payClose();
								uni.hideLoading();
								return that.$util.Tips({
									title: '支付成功',
									icon: 'success'
								}, ()=>{
									that.payOrderSuccess();
								});
							}).catch(res => {
								if (res.errMsg == 'chooseWXPay:cancel'){
									if(that.isCall){
										return that.$util.Tips({
											title: '取消支付'
										});
									}else{
										return that.$util.Tips({
											title: '取消支付'
										}, {	
											tab: 5,
											url: goPages
										});
									}
								} 
							})
							// #endif
							// #ifdef APP-PLUS
							let mp_pay_name=''
							if(uni.requestOrderPayment){
								mp_pay_name='requestOrderPayment'
							}else{
								mp_pay_name='requestPayment'
							}
							uni[mp_pay_name]({
								provider: 'wxpay',
								orderInfo: jsConfig,
								success: (e) => {
									that.payClose();
									return that.$util.Tips({
										title: '支付成功',
										icon: 'success'
									}, {	
										tab: 5,
										url: goPages
									});
								},
								fail: (e) => {
									if(that.isCall){
										return that.$util.Tips({
											title: '取消支付'
										});
									}else{
										return that.$util.Tips({
											title: '取消支付'
										}, {	
											tab: 5,
											url: goPages
										});
									}
								},
								complete: () => {
									uni.hideLoading();
								},
							});
							// #endif
							break;
						// #endif
						// #ifdef MP
						case "routine":
							jsConfig.timeStamp = jsConfig.timestamp;
							that.toPay = true;
							let mp_pay_name=''
							if(uni.requestOrderPayment){
								mp_pay_name='requestOrderPayment'
							}else{
								mp_pay_name='requestPayment'
							}
							uni[mp_pay_name]({
								...jsConfig,
								success: function(res) {
									uni.hideLoading();
									that.payClose();
									if (that.BargainId || that.combinationId || that.pinkId || that.seckillId)
										return that.$util.Tips({
											title: '支付成功',
											icon: 'success'
										}, {	
											tab: 5,
											url: goPages
										});
									
									return that.$util.Tips({
										title: '支付成功',
										icon: 'success'
									}, ()=>{
										that.payOrderSuccess();
									});
								},
								fail: function(e) {
									uni.hideLoading();
									that.payClose();
									return that.$util.Tips({
										title: '取消支付'
									});
								},
								complete: function(e) {
									uni.hideLoading();									
									//关闭当前页面跳转至订单状态
									if (res.errMsg == 'requestPayment:cancel') return that.$util.Tips({
										title: '取消支付'
									});
									that.payClose();
								},
							})
							break;
						// #endif
						case "balance":
							uni.hideLoading();
							that.payClose();
							//余额不足
							return that.$util.Tips({
								title: res.message
							});
							break;
						// #ifdef H5
						case 'h5':
							let host = window.location.protocol+"//"+window.location.host;
							let url = `${host}${goPages}`
							let eUrl = encodeURIComponent(url)
							let jsurl = jsConfig.mweb_url || jsConfig.h5_url
							let locations = `${jsurl}&redirect_url=${eUrl}`
							setTimeout(() => {
								location.href = locations;
							}, 100);
							break;
						// #endif	
							
						// #ifdef APP-PLUS
						case 'alipayApp':
							uni.requestPayment({
								provider: 'alipay',
								orderInfo: jsConfig,
								success: (e) => {
									that.payClose();
									return that.$util.Tips({
										title: '支付成功',
										icon: 'success'
									}, {	
										tab: 5,
										url: goPages
									});
							
								},
								fail: (e) => {
									return that.$util.Tips({
										title: '取消支付'
									});
								},
								complete: () => {
									uni.hideLoading();
								},
							});
						break;
						// #endif
					}
				}).catch(err => {
					uni.hideLoading();
					return that.$util.Tips({
						title: err
					});
				})
			},
			payOrderSuccess: function() {
				this.$util.Tips({}, {
					tab: 3
				});
			}
		},
		onReachBottom() {
		}
	}
</script>

<style scoped lang="scss">
	.content {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		#circle_list {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			.circle {
				display: grid;
				grid-gap: 20rpx;
				grid-template-columns: repeat(2, 1fr);
				overflow: hidden;
				.circle_item {
					background-color: #fff;
					padding: 20rpx;
					display: flex;
					overflow: hidden;
					.circle_avatar {
						width: 120rpx;
						height: 120rpx;
						image {
							width: 120rpx;
							height: 120rpx;
							border-radius: 15rpx;
						}
					}
					.circle_into {
						margin-left: 20rpx;
						flex: 1;
						overflow: hidden;
						.circle_fensi {
							display: flex;
							align-items: center;
							image {
								width: 30rpx;
								height: 30rpx;
								margin-left: 10rpx;
							}
						}
					}
					.circle_checked {
						display: flex;
						image {
							width: 50rpx;
							height: 50rpx;
							margin-left: auto;
						}
					}
				}
			}
		}
		.bottom {
			margin-top: auto;
			padding: 30rpx 30rpx 0;
			text-align: center;
			.bottom_tips {
				text {
					color: #E97E20;
				}
			}
			.prodmotion_circle_select {
				background-color: #fff;
				padding: 30rpx 20rpx 50rpx;
				margin-top: 30rpx;
				.prodmotion_circle_price {
					margin-top: 30rpx;
					.prodmotion_circle_price_list {
						display: grid;
						grid-template-columns: repeat(3, 1fr);
						grid-gap: 20rpx;
						.prodmotion_circle_price_item {
							background-color: #F9F9F9;
							padding: 15rpx;
							border-radius: 15rpx;
							.prodmotion_circle_price_tit {
								text {
									color: #E97E20;
								}
							}
						}
						.on {
							background-color: #FFE103;
						}
					}
				}
				.prodmotion_circle_button {
					width: fit-content;
					background-color: #FFE103;
					margin: 50rpx auto;
					border-radius: 50rpx;
					padding: 15rpx 100rpx;
				}
			}
		}
	}
	.payment {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		max-height: 600rpx;
		border-radius: 16rpx 16rpx 0 0;
		background-color: #fff;
		padding-bottom: 60rpx;
		z-index: 99;
		transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
		transform: translate3d(0, 100%, 0);
	}
	
	.payment.on {
		transform: translate3d(0, 0, 0);
	}
	
	.payment .title {
		text-align: center;
		height: 123rpx;
		font-size: 32rpx;
		color: #282828;
		font-weight: bold;
		padding-right: 30rpx;
		margin-left: 30rpx;
		position: relative;
		border-bottom: 1px solid #eee;
	}
	
	.payment .title .iconfont {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 43rpx;
		color: #8a8a8a;
		font-weight: normal;
	}
	
	.payment .item {
		border-bottom: 1px solid #eee;
		height: 130rpx;
		margin-left: 30rpx;
		padding-right: 30rpx;
	}
	
	.payment .item .left {
		width: 610rpx;
	}
	
	.payment .item .left .text {
		width: 540rpx;
	}
	
	.payment .item .left .text .name {
		font-size: 32rpx;
		color: #282828;
	}
	
	.payment .item .left .text .info {
		font-size: 24rpx;
		color: #999;
	}
	
	.payment .item .left .text .info .money {
		color: #ff9900;
	}
	
	.payment .item .left .iconfont {
		font-size: 45rpx;
		color: #09bb07;
	}
	
	.payment .item .left .iconfont.icon-zhifubao {
		color: #00aaea;
	}
	
	.payment .item .left .iconfont.icon-yuezhifu {
		color: #ff9900;
	}
	
	.payment .item .left .iconfont.icon-yuezhifu1 {
		color: #eb6623;
	}
	
	.payment .item .iconfont {
		font-size: 0.3rpx;
		color: #999;
	}
</style>
